<template>
  <div class="add-store">
    <el-dialog title="店铺绑定" :visible.sync="isVisible" width="500px" @closed="closed('ruleForm')">
      <div class="tips">同类目店铺建议绑定在一个账号下，已绑定店铺无法绑定</div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="店铺网址：" prop="name" placeholder="请输入店铺网址">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="店铺名称：" prop="name" placeholder="请输入店铺名称">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="店铺类目：" prop="name" placeholder="请输入店铺类目">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="店铺主旺旺：" prop="name" placeholder="请输入店铺主旺旺">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="发件人：" prop="name" placeholder="请输入发件人">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="发件人号码：" prop="name" placeholder="请输入发件人号码">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="发货地址：" prop="name" placeholder="请输入发货地址">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closed('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'change' }
        ]
      },
      isVisible: false
    }
  },
  watch: {
    visible(val) {
      this.isVisible = val
    }
  },
  methods: {
    closed(formName) {
      this.$emit('handleClosed')
      this.$refs[formName].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('handleSubmit', this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .add-store{
    .el-dialog{
      .el-dialog__body{
        >.tips{
          border-left: 1px solid #3d80e0;
          padding: 0 0 0 10px;
          margin-bottom: 10px;
          color: #e65527;
          font-size: 12px;
        }
      }
    }
  }
</style>
